<template>
    <div>
        <el-dialog v-model="DialogVisible" :title="title" width="40%">
            <template #header>
                <slot name="FormHeader"></slot>
            </template>
            <slot name="FormContent"></slot>
            <template #footer>
                <div v-if="footerVisable">
                    <el-button @click="Cancel()">取消</el-button>
                    <el-button type="primary" @click="Sure()">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {computed} from "vue";

const dialogConfig = defineProps({
    title: {
        required: true,
        type: String,
    },
    visible: {
        default: false
    },
    footerVisable: {
        default: true,
        type: Boolean
    }
})
const BaseDialogEmit = defineEmits(['SureFormDialog', 'CancelFormDialog', 'DialogVisibleListener']);
const DialogVisible = computed({
    get: () => dialogConfig.visible,
    set: (val) => BaseDialogEmit('DialogVisibleListener', val)
});

function Sure() {
    BaseDialogEmit('SureFormDialog');
}

function Cancel() {
    BaseDialogEmit('CancelFormDialog');
}
</script>

<style scoped>

</style>